iT邦幫忙

2023 iThome 鐵人賽

DAY 24
0
Mobile Development

React Native CLI 開發心法系列 第 24

DAY 24 React Native 效能優化: 使用 Flashlight 衡量應用程式效能

  • 分享至 

  • xImage
  •  

今天要來介紹一個很有趣的效能監測工具 Flashlight,透過 Flashlight 可以查看正式環境的 APP 效能,不只你自己開發的 APP 可以看得到,只要是你手機有安裝的 APP 都可以!而且還會產出像網頁 LightHouse 一樣的 APP 效能報告。

https://ithelp.ithome.com.tw/upload/images/20230928/20162496gaZScN1trL.png

Flashlight 怎麼用?

在本地上使用

安裝 Flashlight CLI

macOS/Linux

curl https://get.flashlight.dev | bash

Windows

iwr https://get.flashlight.dev/windows -useb | iex

連上一台低階的 Android 手機

你需要一台低階的 Android 手機打開偵錯模式並且連接上電腦(Flashlight 目前只能測 Android APP)。
目前僅支援 Android 6.0(sdk API level 23) 以上的手機。

最簡單的用法: flashlight measure

在手機上打開你想測的某一個 APP,並且輸入:

flashlight measure

這個用法很適合開發時邊查看效能。

這邊我們就拿在使用 React Native 開發的 Facebook 來測試看看吧~

https://ithelp.ithome.com.tw/upload/images/20230925/20162496HxaH4vhgpE.png

打開 http://localhost:3000 可以邊操作 Facebook 邊看到效能報告。
主要會產生以下效能指標:

  • FPS
  • Total CPU Usage(%)
  • CPU Usage per thread (%)
  • RAM Usage(MB)

https://ithelp.ithome.com.tw/upload/images/20230925/20162496X9R6JFqh4j.png

https://ithelp.ithome.com.tw/upload/images/20230925/20162496rScSWjeCgn.png

https://ithelp.ithome.com.tw/upload/images/20230925/20162496Z1KcNfz6ZO.png

https://ithelp.ithome.com.tw/upload/images/20230925/20162496aJEauPufg4.png

https://ithelp.ithome.com.tw/upload/images/20230925/20162496ibQYrEMIJa.png

https://ithelp.ithome.com.tw/upload/images/20230925/20162496Rn0OFG451e.png

當然這樣的一次的衡量效能是不夠精準的。所以接下來要介紹 e2e 測試的方法。

使用 End to End Test 來衡量效能指標

找到你要測試的 APP bundle id

在 Android 手機上打開你想要測試的 APP,然後在終端機輸入:

npx @perf-profiler/profiler getCurrentApp

https://ithelp.ithome.com.tw/upload/images/20230925/20162496gOBs65Jt5z.png

這次來測一樣是使用 React Native 開發的 Tesla App ~

輸入 e2e test script

flashlight test --bundleId <your app bundle id> \
  --testCommand <your e2e test command> \
  --duration 10000 \
  --resultsFilePath results.json

flashlight 會幫你跑十次同樣的 e2e test 指令,並且每次固定 10000 ms ,最後把衡量後的效能寫進 results.json 這個檔案。

測試應用程式打開的效能
flashlight test --bundleId "com.teslamotors.tesla" \
  --testCommand "adb shell monkey -p com.teslamotors.tesla -c android.intent.category.LAUNCHER 1" \
  --duration 10000

這段指令就是自動讓 Tesla App 開啟應用程式 10 次、每次 10 秒。

https://ithelp.ithome.com.tw/upload/images/20230925/20162496ts7oHVyFQG.png

https://ithelp.ithome.com.tw/upload/images/20230925/20162496cgGEdzDAMf.png

跑完測試後就會得到效能報告的 json 檔,這時就用這個指令打開:

flashlight report {你本地的目錄}.json

這時候就可以得到效能指標的平均值了!

https://ithelp.ithome.com.tw/upload/images/20230925/201624962jumuD4DzS.png

比較不同的效能測量結果

你可以將不同的測試的 json 檔做比較, flashlight 會幫你把線圖整合在一起,這樣更有助於你理解你的修改是否提升了效能或是可以拿來跟不同 App 做比較。

flashlight report results1.json results2.json results3.json

https://ithelp.ithome.com.tw/upload/images/20230925/20162496ifxXkyPvQG.png

在雲端上使用

上傳 APK 檔

在 flashlight 登入帳號後,把你的 APK 檔上傳,flashlight 就會幫你跑測試,然後在下方設定好要測試的內容。

https://ithelp.ithome.com.tw/upload/images/20230928/20162496iJJTpsZxA0.png

等待測試結果

https://ithelp.ithome.com.tw/upload/images/20230928/20162496gNHOsil3qP.png

測試完成

測試完成會發信通知你,測試結果包含一份效能衡量的測試報告,以及一段測試的影片。

https://ithelp.ithome.com.tw/upload/images/20230928/20162496q6yT2wzHJI.png

查看所有的紀錄

在 History 中,可以查到所有的測試紀錄,如果想要比較衡量的結果,可以每一個項目前面打勾,就可以把資料一起比較。

https://ithelp.ithome.com.tw/upload/images/20230928/20162496n17Ez6S2P8.png

小結

  • 使用 Flashlight 衡量應用程式效能可以真正地測試到 Production 環境效能。
  • Flashlight 的測試報告效能數據可以讓你提前知道你的應用程式存在了什麼樣的效能問題。
  • 透過 Flashlight 可以比對應用程式效能優化前後的差異。
  • Flashlight 可以結合自動化測試腳本提供更準確的效能指標。

上一篇
DAY 23 React Native 效能優化:衡量效能的關鍵指標
下一篇
DAY 25 React Native 效能優化:使用 Firebase Crashlytics 追蹤應用程式 Crash
系列文
React Native CLI 開發心法31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
DL
iT邦新手 5 級 ‧ 2023-10-10 16:44:10

好奇了解怎麼知道Tesla App也是用ReactNative開發的 /images/emoticon/emoticon19.gif

我要留言

立即登入留言